<template>
  <v-navigation-drawer expand-on-hover rail permanent>
    <v-list class="draw-list">
      <v-list-item :prepend-avatar="Avatar" subtitle="大区 等级" title="召唤师"></v-list-item>
    </v-list>
    <v-divider />
    <v-list>
      <v-list-item
        v-for="(item, i) in widgets"
        :key="i"
        :value="item"
        color="primary"
        @click="() => add(item)"
        :prepend-avatar="item.icon"
        :disabled="store.exist(item.key)"
      >
        <div class="flex-between">
          <v-list-item-title :class="item.class" v-text="item.name"></v-list-item-title>
          <div v-if="!item.status.startsWith('#')" class="isOpen">
            {{ item.status }}
          </div>
          <svg v-if="item.status.startsWith('#')" class="icon" aria-hidden="true">
            <use :xlink:href="item.status"></use>
          </svg>
        </div>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>
<script setup>
import _ from 'lodash-es'
import widgets from '../../widget/index'
import { useLayoutStore } from '../../store/user'
import Avatar from '../../assets/black.png'
const store = useLayoutStore()

function add(item) {
  if (item.disable) return false
  if (!store.exist(item.key)) {
    store.addGridItem(item)
  }
}
</script>
<style scoped>
.draw-list {
  height: 50px;
  padding: 0;
  :deep(.v-list-item-title) {
    font-size: 14px;
  }
  :deep(.v-list-item-subtitle) {
    font-size: 12px;
  }
}
.component {
  color: #000000;
  :deep(.v-list-subheader__text) {
    font-weight: bold;
  }
}

.draw-icon {
  width: 4rem;
  height: 2rem;
}
.title {
  color: gray;
  font-size: 12px;
}
.component-title {
  font-weight: 700;
  font-size: 14px;
}
.isOpen {
  font-size: 12px;
  color: gray;
}
</style>
